<template>
	<scroll-view class="songSheetScroll" scroll-y enable-flex
	@scrolltolower="handleTolower(tagSongSheetData.length)" >
		<view class="listItem" v-for="item in tagSongSheetData" :key="item.id"
		@tap="toSongSheetDetail(item.id)">
			
			<image class="cover" :src="item.coverImgUrl?item.coverImgUrl:item.picUrl"></image>
			<view class="playConut">
				<text class="iconfont icon-bofang1"></text>
				<text>{{item.playCount>100000000?parseInt(item.playCount/100000000)+'亿':parseInt(item.playCount/10000)+'万'}}</text>
			</view>
			<text class="title">{{item.name}}</text>
		</view>
		<block v-if="isMore"></block>
	</scroll-view>
</template>

<script>
	export default {
		props:['tagSongSheetData','navName','isMore'],
		methods:{
			// 点击跳转到歌单详情页
			toSongSheetDetail(songSheetId){
				uni.navigateTo({
					url:'/pages/songSheetDetail/songSheetDetail?songSheetId=' + songSheetId
				})
			},
			// 视频scroll-view 自定义上拉加载
			async handleTolower(dataLength){
				console.log(dataLength,'111');
				let res = await this.$myRequest('/top/playlist',{
					cat:this.navName,limit:21,offset:dataLength
				})
				this.tagSongSheetData.push(...res.playlists)
			}
		}
	}
</script>

<style lang="scss">
	// 歌单区域
	.songSheetScroll {
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 100rpx); //140rpx 头部和导航的高度总和
		/* #endif */
		/* #ifdef H5 */
		height: calc(100vh - 180rpx);
		/* #endif */
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;
		// text-align: center;
		text-align: left;
	  .listItem {
			/* #ifdef H5 */
			display: inline-block;// H5支持
			/* #endif */
			position: relative;
			width: 31%;
			height: 340rpx;
			line-height: 36rpx;
		.cover {
			  width: 100%;
			  height: calc(33vw - 20rpx);
			  border-radius: 20rpx;
		}
		.playConut {
			position: absolute;
			right: 0;
			top: 0;
			color: #fff;
			font-size: 26rpx;
			margin: 10rpx;
			padding: 0 15rpx;
			background: rgba(161,162,162,0.5);
			border-radius: 10rpx;
			// filter: blur(20px);
			.iconfont {
				font-size: 22rpx;
			}
		}
		.title {
			  font-size: 26rpx;
			  margin-top: 10rpx;
			  color: rgb(56, 56, 56);
			  word-break: break-all;
			  text-overflow: ellipsis;
			  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
			  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			  -webkit-line-clamp: 2; /** 显示的行数 **/
			  overflow: hidden;  /** 隐藏超出的内容 **/
			  text-align: left;
		}
	  }
	  .listItem:nth-child(3n+2){
	    margin:0 3.5%;
	  }
	}
</style>
